<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>

	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/normalize.css">

	<style>
		/*iphone6这种和更宽的*/
		@media screen and (min-aspect-ratio:410/732) {html{font-size:5.5vh}}

		/*比iphone6更瘦高的*/
		@media screen and (max-aspect-ratio:410/732) {html{font-size:9.5vw}}

		body{
			margin: 0;
			padding: 0;
    }
		#container{
			width: 100vw;
			height: 100vh;
			background-color: rgb(11,33,71);
			position: relative;
		}
/*自适应款高的内框*/
		#background{
			/*适配宽高*/
			/*width和height是普通宽度时的适配比例*/
			width:56.25vh;
			height: 100vh;
			/*max-width和max-height是瘦高宽度时的适配比例*/
			max-width: 100vw;
			max-height:177vw;
			position:absolute;
			left: 0;
			right: 0;
			bottom:0;
			top: 0;
			margin: auto;
			background-color: pink;
			background-image: url('img/background.jpg');
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center center;
		}

		#barcode{
			width:23%;
			height: 13%;

			background-color:rgba(255,255,0,0.3);

			position:absolute;
			left: 0;
			top: 0;
			bottom: 0;
			right: 0;
			margin:auto;
			margin-right: 14%;
			margin-bottom: 45%;
		}

		#sample_text_container{
			width: 80%;
			height: 15%;
			position: absolute;
			left: 0;
			top: 0;
			bottom: 0;
			right: 0;
			margin:auto;
			margin-bottom: 6.5%;
			margin-left: 6%;
		}

		#upper{
			text-align: center;
			font-size:1rem;
			line-height:1.3rem;
			color:rgb(253,203,54);
			margin: 0;
		}
		#lower{
			text-align: center;
			font-size:1.1rem;
			font-weight: bold;
			line-height:1.1rem;
			color:rgb(38,221,181);
			margin: 0;
		}

	</style>
</head>
<body>
	<div id='container'>
		<div id='background'>
				<div id='barcode'></div>
				<div id='sample_text_container'>
					<p id='upper'>
						稳夺魁首金榜题名
					</p>
					<p id='lower'>
						YES YOU CAN
					</p>
				</div>
		</div>
	</div>
<script>
	
	console.log(window.screen);	
	console.log(document.documentElement.clientWidth);		
	console.log(document.documentElement.clientHeight);	
</script>
</body>
</html>
